<template>
	<view class="oprate">
		<view class="top">
			<image class="img yuyin" v-show="!yuyinflag"
			@tap="showyuying"
			src="../../static/images/commom/riFill-voiceprint-fill@2x.png"></image>
			<image class="img yuyin" v-show="yuyinflag" 
			@tap="closeyuying"
			src="../../static/images/commom/keybord.png"></image>
			<view class="txtinput yuyin"  
			@touchstart="yuyinstart"
			@touchmove="yuyinmove"
			@touchend="yuyinend"
			v-show="yuyinflag">
				按住说话
			</view>
			<view class="yuyincover" v-show="pressyuyinflag">
				<view class="yuyincovermiddle">
					<view class="process" ref="process" :style="{width:beginpercent+'%',backgroundColor:processbgc,transform:processtransform}">
						<view class="angle" ref="angle" :style="{borderTopColor:processbgc}"></view>
						<view class="wave"></view>
					</view>
				</view>
				<view class="yuyincover_circle cancle " id="yuyincovercacle" >
					取消
				</view>
				<view class="yuyincover_circle text">
					文字
				</view>
				<view class="yuyincover_text">
					松开发送
				</view>
				<view class="yuyincover_bottom" ref="yuyincover_bottom">
					<view class="circle" ref="circle" :style="{background:background,border:border}"></view>
				</view>
			</view>
			<textarea v-show="!yuyinflag" class="txtinput" auto-height  v-model="sendinfo"/>
			<image class="img biaoqing"
			src="../../static/images/commom/riFill-emotion-fill@2x.png"
			@tap = "showemoji"></image>
			<view class="box">
				<image
				ref="more"
				class="img more" 
				@tap = "showmore"
				src="../../static/images/commom/riFill-add-circle-fill@2x.png"></image>
				<transition 
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter"
				@leave="leave"
				@after-leave="afterLeave">
					<view class="send" v-if="sendflag" @tap="infosend">
						发送
					</view>
				</transition>
			</view>		
		</view>
		<transition name = "more">
			<view class="bottom" v-show="moreboxflag">
				<view class="delete" v-show="emojiflag" @tap = "deletesendinfo">
					<image src="../../static/images/commom/delete.png" class="img"></image>
				</view>
				<scroll-view scroll-y="true" class="emojibox" v-show="emojiflag">		
					<view class="aaa" v-for="(list,index) in emojilist">
						<span class = "bbb" v-for="(item,index) in list" @tap = "sendemoji(item)">{{item}}</span>
					</view>
				</scroll-view>
				<view class="morebox" v-show="moreflag">
					<view class="item">
						<image src="../../static/images/commom/image.png" class="img image" mode="widthFix"
						@tap = "selectimg('album')"></image>
					</view>
					<view class="item">
						<image src="../../static/images/commom/photo.png" class="img photo" mode="widthFix"
						@tap = "selectimg('camera')"></image>
					</view>
					<view class="item">
						<image src="../../static/images/commom/local.png" class="img local" mode="widthFix"
						@tap = "chooseloaction"></image>
					</view>
					<view class="item">
						<image src="../../static/images/commom/video.png" class="img video" mode="widthFix"></image>
					</view>
					<view class="item">
						<image src="../../static/images/commom/file.png" class="img file" mode="widthFix"></image>
					</view>					
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
	import myfunc from "../../commoms/js/myfunction.js"
	const recorderManager = uni.getRecorderManager()//录音方法
	export default {
		name:"chartoperate",
		data() {
			return {
				sendflag:false,
				emojiflag:false,
				moreflag:false,
				moreboxflag:false,
				yuyinflag:false,//是否语音输入
				pressyuyinflag:false,//是否按住语音输入
				presscancle:true,//取消语音输入
				beginpercent:20,//语音的覆盖层的初始长度
				circlestyle:{},
				background:'',
				border:'',
				processbgc:'',
				processtransform:'',
				audiolength:1,
				timer:'',
				touch:{},			
				emojilist:[
					['😀','😃','😄','😁','😆','😅'],
					['🙂','🙃','😉','😊','😇','😍'],
					['😗','😚','😙','😋','😛','😜'],
					['🤑','🤗','🤭','🤫','🤔','🤐'],
					['😶','😏','😒','🙄','😬','🤥'],
					['😪','🤤','😴','😷','🤒','🤕'],
					['🤧','😵','🤯','🤓','🧐','😕'],
					['😮','😯','😲','😳','😦','😧'],
					['😱','😖','😣','😞','😓','😩'],
					['😡','😠','🤬','😈','👿','💀'],
					['👶','🧒','👦','👧','👨','👩'],
					['🤩','😘','🤪','😝','🤨','😐'],
					['😌','😔','🤢','🤮','😟','🙁'],
					['😨','😰','😫','😤','☠','🙁']
				],
				sendinfo:''
			}
		},
		props:{
			fid:{//获取发送者的id
				type:String,
				default:''
			},
			uid:{//获取用户本身id
				type:String,
				default:''
			},
			token:{
				type:String,
				default:''			
			},
			imgurl:{
				type:String,
				default:''			
			}
		},
		methods:{
			beforeEnter(el){
				el.style.transform = "translateX(100%)"
			},
			enter(el,done){
				document.querySelector(".more").style.display = 'none'			
				el.offsetWidth
				el.style.transition = 'all .2s ease';
				el.style.transform = "translateX(0)"
				done()
			},
			afterEnter(el){
				// el.style.transition = "";
			},
			leave(el,done){
				el.style.transform = "translateX(100%)"
				setTimeout(()=>{
					document.querySelector(".more").style.display = 'block'
				},200)
			},
			afterLeave(){
				
			},
			sendemoji(emoji){
				this.sendinfo += emoji;
			},
			deletesendinfo(){
				if(this.sendinfo.length > 0){
					this.sendinfo = this.sendinfo.substring(0,this.sendinfo.length-1)
				}		
			},
			infosend(){//发送文字消息
				this.$emit('infosend',{type:0,data:this.sendinfo,uid:this.uid,tid:this.fid,imgurl:this.imgurl})
				this.$nextTick(()=>{
					this.sendinfo = ""
				})
			},
			showyuying(){
				this.moreboxflag = false;
				this.yuyinflag = true;
			},
			closeyuying(){
				this.yuyinflag = false;
			},
			yuyinstart(e){//点击语音开始		
				recorderManager.start();//开始录音30s
				this.touch.height = uni.getSystemInfoSync().screenHeight;
				this.touch.width = uni.getSystemInfoSync().screenWidth;
				this.pressyuyinflag = true		
				this.presscancle = true;
				this.processtransform = `translateX(0px)`;
				this.processbgc = '#B2EF9B'; 
				this.presscancle  = true
				console.log('语音开始');
				if(!this.timer){
					let eachpercent = 80/30;
					this.beginpercent = 20;	
					this.audiolength = 0;		
					this.timer = setInterval(()=>{
						this.beginpercent += eachpercent
						this.audiolength = this.audiolength+1;
						console.log(this.audiolength);
						if(this.beginpercent > 100){
							this.beginpercent = 100
							this.pressyuyinflag = false
							clearInterval(this.timer)
							this.timer = null; 
						}
					},1000)
				}			
			},
			yuyinmove(e){//按住语音向上滑
				let touch = e.touches[0]
				let bottom = this.touch.height - touch.pageY	
				if(bottom > 100){	
					this.background = 'rgba(64, 64, 64, .4)'
					this.border = "none"
				}else{
					this.background = 'linear-gradient(gray, white)'
					this.border = "10rpx solid #9E9E9E"
				}
				let mytop,mybottom,myleft,myright
				const query = uni.createSelectorQuery().in(this);
				query.select('#yuyincovercacle').boundingClientRect(data => {
				   mytop = data.top
				   mybottom = data.top + data.height
				   myleft = data.left
				   myright = data.left + data.width
				   
				   if((touch.pageY > mytop && touch.pageY < mybottom) && (touch.pageX > myleft && touch.pageX < myright)){//取消发送
					console.log("取消发送")
					let distance = (this.touch.width/2) - (myleft+(data.width/2))
					this.processbgc = '#FF2D55';
					this.processtransform = `translateX(-${distance}px)`;
					this.beginpercent = 20;			   	
					this.presscancle  = false;
				   }else{
					this.processbgc = '#B2EF9B';  
					this.processtransform = `translateX(0px)`;
					this.presscancle  = true;
				   }
				}).exec()			
			},
			uploadfile(filepath,id){//上传图片或音频文件,返回上传之后的路径
				return new Promise((resolve,reject)=>{
					const uploadTask = uni.uploadFile({
					    url: this.serverurl+'files/upload', 
					    filePath: filepath,
					    name: 'file',
					    formData: {
							'url':myfunc.dirnametime(new Date().getTime()),
							'name':new Date().getTime()+id
					    },
					    success: (uploadFileRes) => {
							let obj = JSON.parse(uploadFileRes.data)
							resolve(obj)
					    },
						fail:(err)=>{
							reject(err)
						}
					});	
				})
			},
			yuyinend(){//结束语音	
				if(this.presscancle){
					clearInterval(this.timer);
					this.timer = null; 
					this.beginpercent = 20;				
					let len = this.audiolength
					recorderManager.stop();
					recorderManager.onStop((res) => {			
						this.uploadfile(res.tempFilePath,this.uid).then((data)=>{
							var path = this.serverurl+`${data.path}/${data.filename}`;
							this.$emit('infosend',{type:2,data:path,length:len,uid:this.uid,tid:this.fid,imgurl:this.imgurl})//发送语音消息
						})			
					});
					this.audiolength = 0;
					this.pressyuyinflag = false
					
				}else{
					clearInterval(this.timer);
					this.timer = null; 
					this.beginpercent = 20;	
					this.audiolength = 0;
					this.pressyuyinflag = false
				}
				
			},
			_getelementinfo(el){
				let mydata ;
				uni.getSystemInfo({
				  success: function (res) { // res - 各种参数				
				    let obj = uni.createSelectorQuery().select(el)			
				    obj.boundingClientRect(function (data) { // data - 各种参数			 
						// console.log(data)
						mydata =  data;			
				    }).exec()
				  }
				})
				return mydata
			},
			selectimg(e){//选择图片或拍照
				let mycount;
				if(e == 'album'){
					mycount = 9
				}else{
					mycount = 1
				}
				uni.chooseImage({
				    count: mycount, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: [e], //从相册选择
				    success: (res)=> {
						let imglist = res.tempFilePaths
						for(var i = 0;i<imglist.length;i++){
							this.uploadfile(imglist[i],this.uid).then((data)=>{
								var path = this.serverurl+`${data.path}/${data.filename}`;
								this.$emit('infosend',{type:1,data:path,uid:this.uid,tid:this.fid,imgurl:this.imgurl});//发送图片消息
							})
						}
				    }
				});
			},
			chooseloaction(){//选择定位位置
				uni.chooseLocation({
				    success: (res)=> {
						let data = {
							name:res.name,
							address:res.address,
							latitude:res.latitude,
							longitude:res.longitude					
						}
						this.$emit('infosend',{type:3,data,uid:this.uid,tid:this.fid,imgurl:this.imgurl})//发送位置消息
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
				    }
				});
			},
			showemoji(){
				this.yuyinflag = false;
				this.moreboxflag = true;
				this.moreflag = false;
				this.emojiflag = true;
			},
			showmore(){
				this.yuyinflag = false;
				this.moreboxflag = true;
				this.moreflag = true;
				this.emojiflag = false;
			},
			closemorebox(){
				this.moreboxflag = false;
			}
		},
		watch:{
			sendinfo(newval,oldval){
				if(newval!= ""){
					this.sendflag = true
				}else{
					this.sendflag = false
				}	
			},
			moreboxflag(newval,oldval){
				this.$emit('showmorebox',newval)
			}
		}
	}
</script>

<style lang="scss">
.oprate{
	position: absolute;
	min-height: 100rpx;
	// flex: 0 0 7500rpx;
	bottom: 0;
	width: 100%;
	background-color: #FFFFFF;	
	box-sizing: border-box;
	.top{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		// padding-left: 20rpx;
		// padding-right: 10rpx;
		.box{
			display: flex;
			align-items: center;
			min-width: 68rpx;
		}
		.img{
			width: 48rpx;
			height: 48rpx;
			flex:0 0 48rpx;
			padding: 10rpx;	
			&.yuyin{
				padding-left: 30rpx;	
			}
			// transition: all .2s;
		}
		.send{
			width: 60rpx;
			height: 48rpx;
			flex:0 0 60rpx;
			padding: 10rpx 20rpx;	
			margin-right: 10rpx;
			font-size: 28rpx;
			line-height: 48rpx;
			text-align: center;
			background-color: #34C758;
			border-radius: 18rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
		.txtinput{
			flex: 1;
			display: inline-block;
			border-radius: 16rpx;
			line-height: 32rpx;
			font-size:30rpx;
			border: 2rpx solid rgba(187, 187, 187, 100);
			padding: 20rpx 22rpx;
			font-family: 'PingFangSC-regular';
			&.yuyin{
				text-align: center;
				color: #9E9E9E;
				font-size: 24rpx;
			}
		}
		.yuyincover{
			position: fixed;
			top: 0;
			bottom: 0;
			width: 100%;
			background-color: rgba(64, 64, 64, 0.8);
			z-index: 2000;
			.yuyincovermiddle{
				position: absolute;
				right: 0;
				width: 100%;
				top: 50%;
				transform: translateY(-100%);
				.process{
					position: relative;
					width: 20%;
					height: 100rpx;
					// max-width: 100%;
					margin: 0 auto;
					background-color: #B2EF9B ;
					border-radius: 40rpx;
					padding: 26rpx 32rpx;
					box-sizing: border-box;
					transition: all 0.5s ease;
					.angle{
						transition: all 0.5s ease;
						position: absolute;
						top: 80rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 0rpx;
						height: 0rpx;
						border-left: 20rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-top: 40rpx solid #B2EF9B;
					}
					.wave{
						height: 48rpx;
						width: 100%;
						margin: auto;
						background-image: url(../../static/images/commom/soundwave.png);
						background-repeat: repeat-x;
						background-position: center center;
					}
				}
			}
			.yuyincover_circle{
				position: absolute;
				bottom: 260rpx;
				transform: translateX(-50%);
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: rgba(64, 64, 64, .9);
				color: rgba(158, 158, 158, 100);
				font-size: 28rpx;
				text-align: center;
				line-height: 120rpx;			
				&.cancle{
					left: 10%;
					transform: rotate(-19deg);
				}
				&.text{
					right: 10%;
					transform: rotate(19deg);
				}
			}
			.yuyincover_text{
				position: absolute;
				bottom: 220rpx;
				width: 100%;
				color:  #E5E5EA;
				font-size: 24rpx;
				text-align: center;
			}
			.yuyincover_bottom{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 200rpx;
				overflow: hidden;
				.circle{
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 2000rpx;
					height: 2000rpx;
					background-image: linear-gradient(gray, white);//渐变
					border-radius: 50%;
					border: 10rpx solid #9E9E9E;
					top: 0;
				}
			}
		}
	}
	.bottom{
		height: 450rpx;
		background-color:  #E5E5EA;	
		position: relative;	
		.delete{
			z-index: 99;
			position: absolute;
			background-color: rgba(52, 199, 88, .8);
			top: 35rpx;
			right: 0rpx;
			width: 120rpx;
			height: 62rpx;
			padding: 7rpx 0;
			box-sizing: border-box;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			.img{
				display: block;
				width: 48rpx;
				height: 48rpx;
				margin: 0 auto;
			}
		}
		.morebox{
			padding: 10rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow: hidden;
			.item{
				display: inline-block;
				width: 20%;
				margin-top: 4%;
				margin-left: 4%;
				padding: 4%;
				box-sizing: border-box;
				background-color: #FAFAFA;
				border-radius: 30rpx;
				.img{
					width: 100%;
					// height: 88rpx;
				}
			}
			
		}
		.emojibox{
			padding: 10rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow: hidden;
			.aaa{
				display: flex;
				justify-content: space-around;
				margin-bottom: 20rpx;
				// background-color: red;
				.bbb{
					width: 48rpx;
					height: 48rpx;
					display: inline-block;
					font-size: 48rpx;
					text-align: center;
				}
			}
		}
	}
	.more-enter-active,.more-leave-active{
		transition:  all .4s;
	}
	.more-enter,.more-leave-to{
		&.bottom{
			height: 0;
		}
		
	}
}
</style>
